<script setup lang="ts">
import TodoList from './components/TodoList.vue'
</script>

<template>
  <div class="app">
    <header class="app-header">
      <div class="logo-container">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
        <h1>Vue + TS 待办事项</h1>
      </div>
    </header>
    <main>
      <TodoList />
    </main>
    <footer class="app-footer">
      <p>© {{ new Date().getFullYear() }} Vue + TypeScript 待办事项应用</p>
    </footer>
  </div>
</template>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.logo {
  height: 3em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

main {
  flex: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.app-footer {
  margin-top: 3rem;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: #888;
}
</style>
